<template>
  <div class="filter">
    <div class="uploadBtn">
      <el-select
        v-model="uploadType"
        class="m-2"
        placeholder="请选择上传类型"
        size="large"
      >
        <el-option
          v-for="item in uploadTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <div class="uploadBtn">
      <el-date-picker
        v-model="dateTime"
        type="date"
        size="large"
        placeholder="请选择上传类型"
      />
    </div>

    <div class="uploadBtn">
      <el-button size="large" type="primary" @click="queryAudit"
        >查询</el-button
      >
    </div>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" width="60" align="center" />
    <el-table-column prop="dataType" label="提交类型" align="center">
      <template #default="scope">
        {{ scope.row.dataType == 1 ? "手工录入" : "文件上传" }}
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="提交时间" align="center" />
    <el-table-column prop="username" label="提交人" align="center" />
    <el-table-column prop="auditType" label="提交类型" align="center">
      <template #default="scope">
        {{
          scope.row.auditType == 1
            ? "生产数据"
            : scope.row.auditType == 2
            ? "化验数据"
            : "工艺数据"
        }}
      </template>
    </el-table-column>
    <el-table-column prop="address" label="详情" align="center">
      <template #default="scope">
        <div class="preview" v-if="scope.row.dataType == 2">
          <div class="name">
            <img src="../charts/excelIcon.jpg" alt="" />
            {{ scope.row.fileName }}
          </div>
          <!-- <div style="margin: 0 6px;"> | </div> -->
          <div class="name">
            <el-button size="small" @click="preview(scope.$index, scope.row)"
              >预览</el-button
            >
          </div>
        </div>
        <div v-else>
          <el-button size="small" @click="queryWaterDetail(scope.row)"
            >详情</el-button
          >
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="审核" align="center">
      <template #default="scope">
        <div v-if="scope.row.auditStatus != '0'" style="color: #ccc">
          {{
            scope.row.auditStatus == "-1"
              ? "审核不通过"
              : scope.row.auditStatus == "1"
              ? "审核通过"
              : "待审核"
          }}
        </div>
        <!-- <el-button v-if="scope.row.auditStatus == '-1'" size="small" type="">审核不通过</el-button>
                <el-button v-if="scope.row.auditStatus == '1'" size="small" type="">审核通过</el-button> -->
        <el-button
          v-if="scope.row.auditStatus == '0'"
          size="small"
          type="primary"
          @click="auditData(scope.row, '1')"
          >通过</el-button
        >
        <el-button
          v-if="scope.row.auditStatus == '0'"
          size="small"
          type="danger"
          @click="auditData(scope.row, '-1')"
          >不通过</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogTableVisible" title="文件预览">
    <el-scrollbar class="containRouter">
      <div style="height: 500px" id="tableau" v-html="tableau"></div>
    </el-scrollbar>
  </el-dialog>
  <el-dialog v-model="detailVisible" title="录入详情" width="80%">
    <el-scrollbar class="containRouter">
      <el-table :data="detailTableData" v-if="dialogDetailType == '1'">
        <el-table-column prop="entryDate" label="日期" width="130" />
        <el-table-column prop="treatedWaterQuantity" label="处理水量(万吨)" />
        <el-table-column prop="waterContent" label="中水量(吨)" />
        <el-table-column prop="overflowsSewage" label="外溢雨污水量(万吨)" />
        <el-table-column prop="ch3cooNa" label="乙酸钠(吨)" />
        <el-table-column prop="na2C2O4" label="复合碳源(吨)" />
        <el-table-column prop="pac" label="PAC(吨)" />
      </el-table>
      <el-table :data="detailTableData" v-if="dialogDetailType == '2'">
        <el-table-column prop="date" label="日期" width="130" fixed="" />
        <el-table-column
          prop="treatedWaterQuantity"
          label="处理水量"
          width="100"
        />
        <el-table-column
          prop="overflowsSewage"
          label="外溢雨污水量"
          v-if="currentType == '2'"
        />
        <el-table-column prop="waterTemperature" label="水温" />
        <el-table-column label="pH">
          <el-table-column prop="phIn" label="进水" />
          <el-table-column prop="phOut" label="出水" />
        </el-table-column>
        <el-table-column label="SS(mg/L)">
          <el-table-column prop="ssIn" label="进水" />
          <el-table-column prop="ssOut" label="出水" />
        </el-table-column>
        <el-table-column label="COD(mg/L)">
          <el-table-column prop="codIn" label="进水" />
          <el-table-column prop="codOut" label="出水" />
        </el-table-column>
        <el-table-column label="BOD₃(mg/L)">
          <el-table-column prop="bodIn" label="进水" />
          <el-table-column prop="bodOut" label="出水" />
        </el-table-column>
        <el-table-column label="TN(mg/L)">
          <el-table-column prop="tnIn" label="进水" />
          <el-table-column prop="tnOut" label="出水" />
        </el-table-column>
        <el-table-column label="NH₃-H(mg/L)">
          <el-table-column prop="nhNIn" label="进水" />
          <el-table-column prop="nhNOut" label="出水" />
        </el-table-column>
        <el-table-column label="TP(mg/L)">
          <el-table-column prop="tpIn" label="进水" />
          <el-table-column prop="tpOut" label="出水" />
        </el-table-column>
      </el-table>
      <el-table
        :data="detailTableData"
        v-if="dialogDetailType == '3' && currentType == '2'"
      >
        <el-table-column prop="date" label="日期" width="130" fixed />
        <el-table-column label="DO(mg/L)">
          <el-table-column prop="do1" label="氧化沟东" />
          <el-table-column prop="do2" label="氧化沟西" />
          <el-table-column prop="do3" label="cass" />
          <el-table-column prop="do4" label="A2/O东" />
          <el-table-column prop="do5" label="A2/O西" />
          <el-table-column prop="do6" label="四期南沟" />
          <el-table-column prop="do7" label="四期北沟" />
        </el-table-column>
        <el-table-column label="MLSS(mg/L)">
          <el-table-column prop="mlss1" label="氧化沟东" />
          <el-table-column prop="mlss2" label="氧化沟西" />
          <el-table-column prop="mlss3" label="cass" />
          <el-table-column prop="mlss4" label="A2/O东" />
          <el-table-column prop="mlss5" label="A2/O西" />
          <el-table-column prop="mlss6" label="四期南沟" />
          <el-table-column prop="mlss7" label="四期北沟" />
        </el-table-column>
        <el-table-column label="SV30（%）">
          <el-table-column prop="sv1" label="氧化沟东" />
          <el-table-column prop="sv1" label="氧化沟西" />
          <el-table-column prop="sv1" label="cass" />
          <el-table-column prop="sv1" label="A2/O东" />
          <el-table-column prop="sv1" label="A2/O西" />
          <el-table-column prop="sv1" label="四期南沟" />
          <el-table-column prop="sv1" label="四期北沟" />
        </el-table-column>
        <el-table-column label="SVI">
          <el-table-column prop="svi1" label="氧化沟东" />
          <el-table-column prop="svi1" label="氧化沟西" />
          <el-table-column prop="svi1" label="cass" />
          <el-table-column prop="svi1" label="A2/O东" />
          <el-table-column prop="svi1" label="A2/O西" />
          <el-table-column prop="svi1" label="四期南沟" />
          <el-table-column prop="svi1" label="四期北沟" />
        </el-table-column>
        <el-table-column label="MLVSS(mg/L)">
          <el-table-column prop="mlvss1" label="氧化沟东" />
          <el-table-column prop="mlvss1" label="氧化沟西" />
          <el-table-column prop="mlvss1" label="cass" />
          <el-table-column prop="mlvss1" label="A2/O东" />
          <el-table-column prop="mlvss1" label="A2/O西" />
          <el-table-column prop="mlvss1" label="四期南沟" />
          <el-table-column prop="mlvss1" label="四期北沟" />
        </el-table-column>
        <el-table-column label="污泥含水率（%）">
          <el-table-column prop="containWater1" label="北厂区污泥脱水间" />
          <el-table-column prop="containWater1" label="南厂区污泥脱水间" />
          <el-table-column prop="containWater1" label="四期脱水间" />
        </el-table-column>
      </el-table>
      <el-table
        :data="detailTableData"
        v-if="dialogDetailType == '3' && currentType == '4'"
      >
        <el-table-column prop="date" label="日期" width="130" fixed />
        <el-table-column label="DO(mg/L)">
          <el-table-column prop="do1" label="1#氧化沟" />
          <el-table-column prop="do2" label="2#氧化沟" />
          <el-table-column prop="do3" label="3#氧化沟" />
          <el-table-column prop="do4" label="4#氧化沟" />
          <el-table-column prop="do5" label="5#氧化沟" />
        </el-table-column>
        <el-table-column label="MLSS(mg/L)">
          <el-table-column prop="mlss1" label="1#氧化沟" />
          <el-table-column prop="mlss2" label="2#氧化沟" />
          <el-table-column prop="mlss3" label="3#氧化沟" />
          <el-table-column prop="mlss4" label="4#氧化沟" />
          <el-table-column prop="mlss5" label="5#氧化沟" />
        </el-table-column>
        <el-table-column label="SV30（%）">
          <el-table-column prop="sv1" label="1#氧化沟" />
          <el-table-column prop="sv1" label="2#氧化沟" />
          <el-table-column prop="sv1" label="3#氧化沟" />
          <el-table-column prop="sv1" label="4#氧化沟" />
          <el-table-column prop="sv1" label="5#氧化沟" />
        </el-table-column>
        <el-table-column label="SVI">
          <el-table-column prop="svi1" label="1#氧化沟" />
          <el-table-column prop="svi1" label="2#氧化沟" />
          <el-table-column prop="svi1" label="3#氧化沟" />
          <el-table-column prop="svi1" label="4#氧化沟" />
          <el-table-column prop="svi1" label="5#氧化沟" />
        </el-table-column>
        <el-table-column label="MLVSS(mg/L)">
          <el-table-column prop="mlvss1" label="1#氧化沟" />
          <el-table-column prop="mlvss1" label="2#氧化沟" />
          <el-table-column prop="mlvss1" label="3#氧化沟" />
          <el-table-column prop="mlvss1" label="4#氧化沟" />
          <el-table-column prop="mlvss1" label="5#氧化沟" />
        </el-table-column>
        <el-table-column label="污泥含水率（%）">
          <el-table-column prop="containWater1" label="二期板框" width="140" />
        </el-table-column>
      </el-table>
      <el-table
        :data="detailTableData"
        v-if="dialogDetailType == '3' && currentType == '5'"
      >
        <el-table-column prop="date" label="日期" width="130" fixed />
        <el-table-column label="DO(mg/L)">
          <el-table-column prop="do1" label="1#沟" />
          <el-table-column prop="do2" label="2#沟" />
          <el-table-column prop="do3" label="3#沟" />
          <el-table-column prop="do4" label="4#沟" />
        </el-table-column>
        <el-table-column label="MLSS(mg/L)">
          <el-table-column prop="mlss1" label="1#沟" />
          <el-table-column prop="mlss2" label="2#沟" />
          <el-table-column prop="mlss3" label="3#沟" />
          <el-table-column prop="mlss4" label="4#沟" />
        </el-table-column>
        <el-table-column label="SV30（%）">
          <el-table-column prop="sv1" label="1#沟" />
          <el-table-column prop="sv1" label="2#沟" />
          <el-table-column prop="sv1" label="3#沟" />
          <el-table-column prop="sv1" label="4#沟" />
        </el-table-column>
        <el-table-column label="SVI">
          <el-table-column prop="svi1" label="1#沟" />
          <el-table-column prop="svi1" label="2#沟" />
          <el-table-column prop="svi1" label="3#沟" />
          <el-table-column prop="svi1" label="4#沟" />
        </el-table-column>
        <el-table-column label="MLVSS(mg/L)">
          <el-table-column prop="mlvss1" label="1#沟" />
          <el-table-column prop="mlvss1" label="2#沟" />
          <el-table-column prop="mlvss1" label="3#沟" />
          <el-table-column prop="mlvss1" label="4#沟" />
        </el-table-column>
        <el-table-column label="污泥含水率（%）">
          <el-table-column prop="containWater1" label="板框压滤" width="140" />
        </el-table-column>
      </el-table>
      <el-table
        :data="detailTableData"
        v-if="dialogDetailType == '3' && currentType == '3'"
      >
        <el-table-column prop="date" label="日期" width="130" fixed />
        <el-table-column label="DO(mg/L)">
          <el-table-column prop="do1" label="南" />
          <el-table-column prop="do2" label="北" />
        </el-table-column>
        <el-table-column label="MLSS(mg/L)">
          <el-table-column prop="mlss1" label="南" />
          <el-table-column prop="mlss2" label="北" />
        </el-table-column>
        <el-table-column label="SV30（%）">
          <el-table-column prop="sv1" label="南" />
          <el-table-column prop="sv1" label="北" />
        </el-table-column>
        <el-table-column label="SVI">
          <el-table-column prop="svi1" label="南" />
          <el-table-column prop="svi1" label="北" />
        </el-table-column>
        <el-table-column label="MLVSS(mg/L)">
          <el-table-column prop="mlvss1" label="南" />
          <el-table-column prop="mlvss1" label="北" />
        </el-table-column>
        <el-table-column
          label="污泥含水率（%）"
          prop="containWater1"
          width="140"
        >
          <!-- <el-table-column prop="containWater1" label="北厂区污泥脱水间" />
          <el-table-column prop="containWater1" label="南厂区污泥脱水间" />
          <el-table-column prop="containWater1" label="四期脱水间" /> -->
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup>
import moment from "moment";
import { onMounted, ref } from "vue";
import axios from "axios";
import * as XLSX from "xlsx";
import dataListHttp from "@/https/dataList";
import { ElMessage, ElMessageBox } from "element-plus";

const uploadType = ref("");
const currentType = ref("");
const uploadTypeList = ref([
  { label: "文件上传", value: "2" },
  { label: "手工录入", value: "1" },
]);

const dialogDetailType = ref("");
const dateTime = ref("");
let tableData = ref([]);
let detailTableData = ref([]);
let tableau = ref(null);
let dialogTableVisible = ref(false);
let detailVisible = ref(false);
function preview(index, row) {
  if (["xls", "xlsx"].includes("xls")) {
    dialogTableVisible.value = true;
    axios
      .get(`waterFile/${row.fileName}`, {
        responseType: "arraybuffer", // 设置响应体类型为arraybuffer
      })
      .then(({ data }) => {
        let workbook = XLSX.read(new Uint8Array(data), { type: "array" }); // 解析数据
        var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
        tableau.value = XLSX.utils.sheet_to_html(worksheet); // 渲染
      });
    return;
  }
}
onMounted(() => {
  queryAudit();
});
const auditData = (row, auditStatus) => {
  let auditStatusName = auditStatus == "-1" ? "不通过审核" : "通过审核";
  ElMessageBox.alert(`确认${auditStatusName}吗？`, "审核", {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确认",
    callback: (action) => {
      if (action == "confirm") {
        let params = {
          auditStatus: auditStatus,
          id: row.id,
        };
        dataListHttp.auditData(params).then((res) => {
          if (res.data.code == 200) {
            queryAudit();
          }
        });
      }
    },
  });
};
const queryAudit = () => {
  let params = {
    // auditStatus: '',
    dataType: uploadType.value,
    // id: '',
    startTime: dateTime.value
      ? moment(dateTime.value).format("YYYY-MM-DD")
      : "",
  };
  dataListHttp.queryAudit(params).then((res) => {
    console.log(res);
    tableData.value = res.data.data;
  });
};
const queryWaterDetail = (row) => {
  detailVisible.value = true;
  currentType.value = row.depId;
  console.log(currentType.value);
  let http =
    row.auditType == "1"
      ? "queryWaterDetail"
      : row.auditType == "2"
      ? "queryAssayDetail"
      : "queryCraftDetail";
  dialogDetailType.value = row.auditType;
  dataListHttp[http](row.id).then((res) => {
    console.log(res.data.data);
    res.data.data.forEach((item) => {
      item.entryDate = moment(item.entryDate).format("YYYY-MM-DD");
    });
    detailTableData.value = res.data.data;
  });
};
</script>

<style lang="less">
.preview {
  display: flex;
  flex-direction: row;
  align-items: center;

  .name {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 6px;

    img {
      width: 14px;
      height: 14px;
      margin-right: 2px;
    }
  }
}

.el-dialog__header {
  border-bottom: 1px solid #ccc;
  margin-right: 0;
}

.el-dialog__body {
  padding: 30px;
}

.filter {
  display: flex;
  flex-direction: row;
}

.uploadBtn {
  text-align: left;
  margin-bottom: 40rem;
  margin-right: 20rem;
}

#tableau table {
  width: 100%;

  #sjs-A1 {
    width: 100%;
    text-align: center;
    line-height: 2;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  td {
    border: 1px solid #ccc;
    text-align: center;
    line-height: 1.5;
  }
}
</style>
